<template>
  <div class="demo-title">notice-bar/demo7</div>
  <NoticeBar text="Note that this is a reminder message." @click="onClick">
    <template #right-icon>
      <Icon name="arrow-right2" size="11" class="ssc-notice-bar-right-icon"></Icon>
    </template>
  </NoticeBar>
</template>

<script lang="ts" setup>
  import NoticeBar from '@sscd-mobile/notice-bar'
  import Icon from '@sscd-mobile/icon'
  import Toast from '@sscd-mobile/toast'
  const onClick = () => {
    Toast.show({ text: 'Click to see more' })
  }
</script>

<style scoped lang="less">
  .ssc-notice-bar-right-icon {
    margin-left: 8px;
  }
</style>
